<template>
	<view>
		<scroll-view scroll-x="true" >
			<view class="types">
				<view class="boxs"  v-for="item in typeList" :key="item.name" :style="{borderColor:item.active?item.border:'#ccc'}" @click="handelChose(item)">
					<image src="../../static/1.png" style="width: 100rpx;height: 100rpx;" mode="aspectFill"></image>
					<!-- <image :src="item.icon" style="width: 50rpx;height: 50rpx;" mode="aspectFill"></image> -->
					<view class="desc">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>
		<up-modal :show="show" :title="'提示'" :content='contetmodal' @confirm="confirm" @cancel="show = false" show-cancel-button="true"></up-modal>
		
		<view style="position: relative;width: 100%; border-radius: 20rpx;
		border: 1rpx solid #ccc;height: 300rpx;margin: 30rpx;
		width: calc(100% - 60rpx);">
			<textarea class="texts" v-model="content" placeholder="输入内容 比如画一只小猫~"/>
			<button type="primary" class="generate" size="mini" :loading="imgLoading" @click="toPic">生成</button>
		</view>
		<view>
			<image :src="currentImg" mode="aspectFill" style="width: 100%;height: 800rpx;box-sizing: border-box;padding: 20rpx;border-radius: 10rpx;"></image>
		</view>
			
	</view>
</template>

<script setup>
	import {drawPic,wxLogin,backLogin} from '../../utis/api.js'
	import {onMounted, reactive, ref} from 'vue'
import { setToken } from '../../utis/authon.js';
	const content = ref("");
	let currentImg = ref("");
	let currentType = ref("");
	let imgLoading = ref(false);
	let show = ref(false);
	const contetmodal = ref("当前功能需要用户登录，点击确定注册或登录")
	const typeList = reactive([
		{
			name:"无风格",
			icon:"",
			border:"RGB(255, 87, 51)",
			active:true
		},
		{
			name:"卡通动漫",
			icon:"",
			border:"RGB(127, 219, 255)"
		},{
			name:"治愈男生",
			icon:"",
			border:"RGB(244, 208, 63)"
		},{
			name:"治愈女生",
			icon:"",
			border:"RGB(211, 84, 0)"
		},{
			name:"港风氛围",
			icon:"",
			border:"RGB(93, 173, 226)"
		},{
			name:"复古手绘",
			icon:"",
			border:"RGB(142, 68, 173)"
		},{
			name:"氛围阳光",
			icon:"",
			border:"RGB(39, 174, 96)"
		},{
			name:"韩漫少女",
			icon:"",
			border:"RGB(231, 76, 60)"
		},{
			name:"氛围感",
			icon:"",
			border:"RGB(26, 188, 156)"
		},{
			name:"风景",
			icon:"",
			border:"RGB(155, 89, 182)"
		},{
			name:"赛博朋克",
			icon:"",
			border:"RGB(241, 196, 15)"
		}
	])
	onMounted(()=>{
		
	})
	const confirm = ()=>{
		wxLogin().then(res=>{
			if(res.errMsg === "login:ok") {
				backLogin({code:res.code}).then(authon=>{
					if(authon.code === 0) {
						show.value = false;
						setToken(authon.data.token);
						uni.setStorageSync("session_key",authon.data.session_key);
						uni.setStorageSync("openid",authon.data.openid);
						uni.setStorageSync("token",authon.data.token);
						uni.setStorageSync("nickName",authon.data.nickName);
						uni.setStorageSync("avatarUrl",authon.data.avatarUrl);
						uni.navigateBack({
							delta: 1
						  })
						uni.navigateTo({
						  url: 'pages/views/picture',
						})
					}
				})
			} else {
				uni.showToast({
					title:"微信登录失败"
				})
				show.value = false;
			}
		})
	}
	const toPic = ()=>{
		if(wx.getStorageSync("token")) {
			imgLoading.value = true;
			let str = content.value?content.value:"画一只小猫";
			drawPic({content:str+"另外再加上风格为:"+currentType.value}).then(res=>{
				console.log(res);
				imgLoading.value = false;
				const datas = JSON.parse(res.data)
				console.log(datas)
				currentImg.value = datas.data[0].url;
				// {"created":1731396824,"data":[{"url":"https://sfile.chatglm.cn/testpath/5a2ecfda-9295-5642-9189-0546f3b4c486_0.png"}],"request_id":null}
			})
		} else {
			show.value = true;
		}
		
	}
	
	const handelChose = (item)=>{
		typeList.map(el=>{
			if(item.name === el.name) {
				currentType = el.name
			}
			el.active = item.name === el.name?true:false;
			return el
		})
	}
</script>
<style lang="less" scoped>
	.types {
		height: 100rpx;display: flex;flex-wrap: nowrap;flex-direction: row;
		.boxs {
			width: 100rpx;height: 100rpx;margin: 0 10rpx;position: relative;box-sizing: border-box;border-radius: 10rpx;border: 8rpx solid #fff;
		}
		.desc {
			 position: absolute;bottom: 0;width: 100%;font-size: 20rpx;left: 0;right: 0;margin: auto;text-align: center;
			 background-color: rgba(0, 0, 0, 0.3);
			 color: #fff;
		}
		
	}
	.texts {
		padding: 20rpx;
		box-sizing: border-box;
		width: 100%;
		z-index: 1;
		position: relative;
		max-height: 220rpx;
	}
	.generate {
		position: absolute;
		right: 10vw;
		bottom: 5%;
		line-height: 5vh;
		z-index: 10;
	}
</style>
